<template>
    <div>
        <div class="tableHeader">
        <div class="tableHeaderTitle">广告列表</div>
            <div class="tableHeaderMenu">
                <el-button-group>
                    <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
                </el-button-group>
            </div>
        </div>
        <el-table ref="multipleTable" :data="bannerData" tooltip-effect="dark" style="width: 100%">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column prop="cb_title" label="广告名称"></el-table-column>
            <el-table-column prop="cbc_name" label="所属广告栏目"></el-table-column>
            <el-table-column label="广告图片">
                <template slot-scope="scope">
                    <img :src="scope.row.cb_image_url" v-if="scope.row.cb_image_url" class="previewImage" style="width:120px;height:50px;" />
                    <img src="~BUSSINESS_IMAGE/images/morentu.jpeg" v-if="!scope.row.cb_image_url" class="previewImage" style="width:120px;height:50px;" />
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="260">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[20,50,100,200]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.dataLength"
        ></el-pagination>
        </el-col>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {

            }
        },
        //初始化函数
        mounted() {
            //获取广告信息
            this.initData()
        },
        //计算属性
        computed: {
            ...mapState({
                bannerData : state => state.BannerListModule.bannerData,
                pagination : state => state.BannerListModule.pagination
             })
        },
        //组件方法
        methods: {
            initData(){
                this.$myLoading.startLoading()
                this.$http.getHttp(
                    this.$API.easyD_V_CmsBannerInfoSearch + "/skip/" +this.pagination.skip+ "/limit/" +this.pagination.pageSize+ "/cb_is_delete/0/count/1",
                    rs => {
                        this.$store.commit('BannerListModule/updateBannerData',rs.data)
                        this.$store.commit('BannerListModule/updatePaginationDataLength',parseInt(rs.count))
                        this.$myLoading.endLoading()
                    }
                )
            },
            refreshData(){
                this.initData()
            },
            handleEdit(index,item){
                this.$router.push({
                    path: "/editBanner",
                    query : {
                        cb_id : item.cb_id
                    }
                })
            },
            handleDelete(index,item){

                var params = {
                    delete_where  : "cb_id",
                    cb_id        : item.cb_id,
                    cb_is_delete : 1
                }

                this.$myPop.confirmBox("确认操作","确定要删除该广告吗？",()=>{
                    this.$myLoading.startLoading()
                    this.$http.postHttp(
                        this.$API.cmsBannerDelete,
                        params,
                        rs => {
                            this.$myLoading.endLoading()
                            this.$myPop.SuccessMessage()
                            this.initData()
                        }
                    )
                })
            },
            handleSizeChange(page){
               this.pagination.pageSize = page;
               this.initData();
            },
            handleCurrentChange(page){
                this.pagination.skip        = (page-1) * this.pagination.pageSize;
                this.pagination.currentPage = page;
                this.initData();
                
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';

</style>